<template>
  <view>
    <div class="tabbarMain" id="tabMain">
      <image src="https://oss.seenlove.com/images/2bdad5f595c6debaa5f5a75e1ff121b4.png" mode="widthFix" @load="load" />
      <view class="wrap flex justifyBetween justifyFlexEnd textCenter">
        <view v-for="(item, index) in list" :key="index" class="box" @click="itemClick(index)">
          <view class="tabbar" v-if="item.name">
            <uv-icon :name="icon_format(index)" size="30"></uv-icon>
            <view class="text">{{ item.name }}</view>
          </view>
          <view class="dot" v-else>
            <view class="plus">
              <uv-icon color="#fff" name="plus" size="22" blod></uv-icon>
            </view>
          </view>
        </view>
      </view>
    </div>

    <!-- 点击弹幕 -->
    <uv-popup ref="popup" bgColor="transparent" :safeAreaInsetBottom="false" zIndex="2" @change="change">
      <view class="popupContent" :style="popupContentStyle">
        <view class="avatar flex justifyCenter">
          <uv-avatar :src="counter.bulletChat.logo" size="140"></uv-avatar>
        </view>
        <view class="main">
          <view class="info flex alignCenter justifyCenter">
            <view class="name fz16 bold">{{userInfo.nickName}}</view>
            <view class="sex flex alignCenter" :style="sexStyle">
              <view class="icon">
                <uv-icon name="man" color="#fff" size="12"></uv-icon>
              </view>
              <view class="age">{{userInfo.age}}</view>
            </view>
          </view>
          <view class="local flex justifyBetween alignCenter">
            <view class="item">
              籍贯：{{userInfo.homeEconomize}}
            </view>
            <view class="item">
              IP：{{userInfo.city}}
            </view>
            <view class="item">
              星座：{{userInfo.constellation}}
            </view>
          </view>

          <view class="desc flex justifyCenter alignCenter">
            <view class="text bold">{{userInfo.text}}</view>
            <view class="like flex justifyCenter alignCenter" @click="likeClick">
              <view class="icon">
                <image v-if="userInfo.hasLiked==0" src="https://oss.seenlove.com/images/7a4cecf3a3f076442068d0cdb3e5c67c.png" mode="widthFix" />
                <image v-else src="https://oss.seenlove.com/images/208088cab7ca72a7632d2b3eaf842c37.png" mode="widthFix" />
              </view>
              {{userInfo.likeCount}}
            </view>
          </view>

          <view class="btn fz14" @click="toDetails(userInfo.id)">查看资料</view>
        </view>
      </view>
    </uv-popup>

    <!-- 选择活动城市 -->
    <uv-popup ref="cityPopup" round="15" :safeAreaInsetBottom="false" zIndex="2" mode="bottom" @change="change">
      <view class="selectCity" :style="popupContentStyle">
        <view class="top flex justifyBetween">
          <view class="left fz14" @click="instance.refs.cityPopup.close()">取消</view>
          <view class="middle textCenter">
            <view class="title fz16">选择城市</view>
            <view class="tips fz12">目前我们开通了以下城市的活动</view>
          </view>
          <view class="right fz14" @click="confirmCity">完成</view>
        </view>
        <view class="bottom">
          <picker-view @change="bindChange" class="picker-view" :value="cityValue">
            <picker-view-column>
              <view class="timeItem" :class="{active: index ==cityValue[0]}" v-for="(item,index) in citys" :key="index">{{item}}</view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
let props = defineProps(["current"]);

let userInfo = ref({});
let list = ref([
  {
    name: "主页",
    icon: "43c22456b7d3f9f1ffd5f3693a27af02.png",
    activeIcon: "596ac356e328b6703957f3a0fd2ca4d9.png",
    path: "/pages/tabbar/tabbar-1/tabbar-1",
  },
  {
    name: "广场",
    icon: "a6d557d2b85dde00fb2d29a0ae9b8075.png",
    activeIcon: "1ab9a087271a60ae1b1b2af2c5927123.png",
    path: "/pages/tabbar/tabbar-2/tabbar-2",
  },
  {
    name: "",
    icon: "f6eeb4bcc23556cc269458fdf173cfce.png",
    activeIcon: "f6eeb4bcc23556cc269458fdf173cfce.png",
    path: "/packagePages/dynamic/publishUpdates",
  },
  {
    name: "消息",
    icon: "7fb01fe07628486372c651abfda2bc27.png",
    activeIcon: "ffafc9b791297f83ec425d15fa83de3b.png",
    path: "/pages/tabbar/tabbar-4/tabbar-4",
  },
  {
    name: "我的",
    icon: "2b18afefae5091568a76b4d8a1cc6b1b.png",
    activeIcon: "62dd9b853b42674a58cbad4c09c24efd.png",
    path: "/pages/tabbar/tabbar-5/tabbar-5",
  },
]);
let current = ref(props.current);
let cityValue = ref([0]);
let citys = ref([]);
let activityCityChecked = ""; //活动城市选择

onMounted(() => {
  current.value = props.current;
  load();
});

let setCss = async () => {
  let tabHeight = await viewInfo("#tabMain", "height");
};

let icon_format = (index: number) => {
  if (index == current.value)
    return `https://oss.seenlove.com/images/${list.value[index].activeIcon}`;
  return `https://oss.seenlove.com/images/${list.value[index].icon}`;
};

let sexStyle = computed(() => {
  return {
    background: userInfo.value.sex == "1" ? "#4990FF" : "#FF67A6",
  };
});

let popupContentStyle = computed(() => {
  return {
    paddingBottom: counter.slParams.tabbarHeight + "px",
  };
});

let itemClick = (index: number) => {
  current.value = index;
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const currentRoute = currentPage.route;
  if (list.value[index].path.includes(currentRoute)) return;
  proxy.$utils.toLink(list.value[index].path, "redirectTo");
};

let likeClick = async () => {
  if (userInfo.value.hasLiked == 0) {
    await proxy.$apis.like(counter.bulletChat.id);
  } else {
    await proxy.$apis.dislike(counter.bulletChat.id);
  }
  getUserInfo();
};

let bindChange = (e) => {
  let val = e.detail.value;
  cityValue.value = val;
  activityCityChecked = citys.value[val[0]];
};

let confirmCity = () => {
  counter.activityCityChecked = activityCityChecked;
  instance.refs.cityPopup.close();
};

let load = (e) => {
  setTimeout(() => {
    nextTick(() => {
      setCss();
    });
  }, 150);
};

let change = (e) => {
  if (!e.show) {
    counter.bulletChat = {};
    counter.bulletShow = false;
    counter.activityCityShow = false;
  }
};

let getUserInfo = async () => {
  let data = await proxy.$apis.sceenIntroduction({
    barrageId: counter.bulletChat.id,
  });
  console.log("选中的用户信息", data);
  userInfo.value = data;
};

let setPop = async () => {
  await getUserInfo();
  instance.refs.popup.open("bottom");
};

async function toDetails(id) {
  await proxy.$apis.addVisitor({ friendId: id, form: 1 });
  proxy.$utils.toLink(`/packagePages/user/details?id=${id}`);
}

let setCityPop = async () => {
  citys.value = await proxy.$apis.getActivityCity();
  if (counter.activityCityChecked) {
    for (let index = 0; index < citys.value.length; index++) {
      const element = citys.value[index];
      if (element == counter.activityCityChecked) cityValue.value = [index];
    }
  }
  instance.refs.cityPopup.open();
};

//获取页面元素信息
function viewInfo(id, type) {
  return new Promise((resolve, reject) => {
    uni
      .createSelectorQuery()
      .in(instance)
      .select(id)
      .boundingClientRect((data) => {
        if (data) {
          resolve(data[type]);
        } else {
          resolve(0);
        }
      })
      .exec();
  });
}

watch(
  () => counter.bulletShow,
  (newValue, oldValue) => {
    if (newValue) setPop();
  },
  { deep: true, immediate: true }
);

watch(
  () => counter.activityCityShow,
  (newValue, oldValue) => {
    if (newValue) setCityPop();
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.tabbarMain {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 10px;
  z-index: 10;
  background-color: white;
  .wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    .box {
      width: 20%;
      .text {
        color: #333333;
        font-size: 10px;
      }
      .dot {
        width: 50px;
        background: linear-gradient(to right, #d3a7f9, #b2a1ff);
        height: 50px;
        border-radius: 50%;
        margin: 0 auto 2vw;
        position: relative;
        .plus {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
}
.popupContent {
  background: transparent;
  position: relative;
  padding-bottom: 10px;
  .avatar {
    border: 2px solid #fff;
    border-radius: 50%;
    width: 140px;
    margin: auto;
    z-index: 1;
  }
  .main {
    background-color: white;
    margin-top: -71px;
    border-radius: 25px 25px 0 0;
    box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.2);
    padding: 85px 0 10px;
    .info {
      .name {
        color: #000;
        margin-right: 7px;
      }
      .sex {
        color: white;
        font-size: 8px;
        border-radius: 8px;
        padding: 3px 6px;
        .icon {
          width: 10px;
          margin-right: 4px;
        }
      }
    }
    .local {
      width: 70%;
      font-size: 10px;
      color: #999999;
      margin: auto;
      padding: 6px 0 8px;
    }
    .desc {
      color: #999999;
      font-size: 10px;
      margin-bottom: 19px;
      .text {
        margin-right: 11px;
      }
      .like {
        .icon {
          width: 13px;
          margin-right: 2px;
          image {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
    }
    .btn {
      width: 140px;
      margin: auto;
      color: white;
      border-radius: 14.5px;
      background: linear-gradient(to right, #d3a7f9, #b2a1ff);
      box-shadow: 0 2px 8px 2px rgba(182, 159, 254, 0.53);
      text-align: center;
      padding: 5px 0;
    }
  }
}

.selectCity {
  padding: 17px 16px;
  .top {
    .left {
      color: #999999;
    }
    .right {
      color: #9e06ff;
    }
    .middle {
      color: #333333;
      .tips {
        color: #999999;
        margin-top: 8px;
      }
    }
  }
  .bottom {
    .picker-view {
      width: 100%;
      height: 150px;
      .timeItem {
        line-height: 34px;
        text-align: center;
        color: #999999;
      }
      .active {
        background-color: #fcf3ff;
        color: #333333;
        font-size: 16px;
        border-radius: 5px;
      }
    }
  }
}
</style>
